<template>
  <div class="car">
    <van-nav-bar title="" left-text="返回" left-arrow>
      <template #left>购物车({{ shopCarList.length }})</template>
      <template #right>
        <div
          @click="management = !management"
          :class="management ? 'manage' : ''"
          v-if="shopCarList.length !== 0"
        >
          管理
          <van-icon name="cross" v-if="management" />
        </div>
      </template>
    </van-nav-bar>
    <!-- 头部组件 -->

    <!-- 购物车区域 -->
    <img
      src="../assets/carClear.jpg"
      v-if="shopCarList.length == 0"
      class="clearCar"
    />
    <van-row
      class="carMain"
      gutter="20"
      v-for="v in shopCarList"
      :key="v.id"
      v-else
    >
      <van-col span="4">
        <van-switch
          v-model="v.checked"
          active-color="pink"
          inactive-color="#dcdee0"
          @click="isChecked(v)"
      /></van-col>
      <van-col span="4" @click="toProduct(v.id)"
        ><img :src="v.img_url"
      /></van-col>
      <van-col span="16" class="productmain">
        <p @click="toProduct(v.id)">{{ v.title }}</p>
        <div>
          <span>￥{{ v.sell_price }}</span>
          <van-stepper v-model="v.amount" />
        </div>
      </van-col>
    </van-row>

    <!-- 结算区域 -->
    <div class="computed">
      <van-row gutter="20">
        <!-- 第一个col -->
        <van-col span="8">
          <van-switch
            v-model="checkAll"
            active-color="#f7797d"
            inactive-color="#dcdee0"
          /><span>全选</span>
        </van-col>
        <!-- -----管理触发后，切换成删除操作 -->
        <van-col span="10" class="management" v-if="management">
          <van-button plain type="info">移入收藏夹</van-button>
          <van-button plain type="info" @click="del">删除</van-button>
        </van-col>
        <van-col span="10" class="total" v-else>
          合计：<span
            >￥<span>{{ getTotal }}</span></span
          >
        </van-col>
        <van-col span="8" v-if="!management">
          <van-button color="#f7797d" class="settle">结算</van-button>
        </van-col>
      </van-row>
    </div>

    <!-- 结算区域 -->
    <!-- 购物车区域 -->
  </div>
</template>

<script>
// 引入头部组件
import Header from "@/components/Header";
export default {
  data() {
    return {
      shopCarList: [],
      management: false,
    };
  },
  methods: {
    // 选中
    isChecked(v) {
      v.checked = !v.checked;
      // 拿到本地存储的数据进行指定修改状态
      let data = JSON.parse(localStorage.getItem("shopInfo"));
      // console.log(data, v);
      data.forEach((item) => {
        // console.log(v);
        if (item.id == v.id) {
          item.checked = v.checked;
          // console.log(item.checked);
        }
      });
      // 存储本地数据
      localStorage.setItem("shopInfo", JSON.stringify(data));
    },

    // 管理
    manage() {},

    // 删除
    del() {
      let arr = [];
      this.shopCarList.filter((v) => {
        // console.log(v);
        if (v.checked !== true) {
          console.log(v, "这是删除");
          // 未被选中的我把它加进去
          arr.push(v);
          // console.log(arr);
        }
      });
      this.shopCarList = arr;

      localStorage.setItem("shopInfo", JSON.stringify(this.shopCarList));

      // 如果当前购物车已经没有东西可以删了，将管理状态改为false
      if (this.shopCarList.length == 0) {
        this.management = false;
      }
    },

    // 单击购物车的商品返回商品界面
    toProduct(id) {
      // console.log(id);
      this.$router.push({ path: `/details/${id}` });
    },
  },
  mounted() {
    this.shopCarList = JSON.parse(localStorage.getItem("shopInfo"));
    // console.log(this.shopCarList);
  },
  components: {
    Header,
  },
  computed: {
    // 全选按钮
    checkAll: {
      set(value) {
        // console.log(value);
        this.shopCarList.forEach((v) => {
          // console.log(1);
          v.checked = value;
        });
        // 展开这个数组，返回一个新的数组
        this.shopCarList = [...this.shopCarList];

        // this.shopCarList = this.shopCarList.map(item=>{
        //   return {
        //     ...item,
        //     checked: value
        //   }
        // })
      },
      get() {
        // let flag = true;

        // this.shopCarList.forEach((v) => {
        //   console.log(v);
        //   if (v.checked === false) {
        //     //如果一个都没有选中，那么全选按钮未被选中
        //     flag = false;
        //   }
        // });
        // return flag;
        // every方法是返回一个布尔值，函数里放判定条件
        return this.shopCarList.every((item) => item.checked);
      },
    },

    // 选中合计价格
    getTotal() {
      let total = 0;
      this.shopCarList.forEach((v) => {
        if (v.checked == true) {
          // console.log(v, "这里是V");
          total += v.amount * v.sell_price;
        }
      });
      return total;
    },
    getTotalAmount() {
      let amount = 0;
      this.shopCarList.forEach((v) => {
        if (v.checked == true) {
          // console.log(v, "这里是V");
          amount += v.amount;
        }
      });
      return amount;
    },
  },
};
</script>

<style lang="less" scoped>
.car {
  position: relative;
  height: 100vh;
  // 设置所有的按钮长度和宽度
  .manage {
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    color: white;
    width: 60px;

    // width: 40px;
    // line-height: 35px;
    border: 1px solid black;
    border-radius: 10px;
    background-color: pink;
  }
  // 购物车清空后的样式
  .clearCar {
    width: 100%;
  }

  .van-switch {
    height: 20px;
    width: 35px;
    /deep/ .van-switch__node {
      width: 20px;
      height: 20px;
    }
    // 不知道为什么加不上去
    .van-switch--on {
      -webkit-transform: translateX(20px) !important;
      transform: translateX(20px) !important;
    }
  }

  .carMain {
    height: 100px;
    padding: 15px 10px;
    border-bottom: 2px solid rgba(204, 204, 204, 0.466);
    display: flex;
    align-items: center;
    img {
      width: 50px;
    }
    .productmain {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      div {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  // 结算区域
  .computed {
    position: fixed;
    // left: 100px;
    bottom: 50px;

    // margin-bottom: 100px;
    height: 80px;
    width: 100%;
    background-color: #ccc;
    margin-top: 15px;
    .van-row {
      height: 100%;

      display: flex;
      justify-content: space-between;
      align-items: center;
      .van-col {
        &:first-child {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
        }
        .settle {
          width: 90px;
          height: 35px;
          border-radius: 20px;
          text-align: center;
        }
        &:last-child {
          text-align: center;
        }
      }
      // 总价
      .total {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        span {
          color: red;
          span {
            font-size: 23px;
          }
        }
      }
      // 管理
      .management {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .van-button {
          height: 35px;
          margin-left: 10px;
          border-radius: 25px;
        }
      }
    }
  }
}
</style>